<template>
  <button @click="changeLang">{{ $t("common.language") }}</button>
  <div>{{ $t("common.home") }}</div>
  <app-button @click="handleClick" />
</template>

<script setup lang="ts">
import { useToggle } from "~/components/composables/useToggle";

const { locale, setLocale } = useI18n();
const { state: isOpen, toggle } = useToggle();
const changeLang = () => {
  const newLocale = locale.value === "en" ? "zh" : "en";
  setLocale(newLocale);
};

const handleClick = () => {
  toggle();
  console.log("isOpen", isOpen.value);
};
</script>

<style scoped></style>
